import QtQuick

Rectangle {
    id: navMenu
    property var dataObj: [{
            "title": "打开文件",
            "suffix": "ctl+a",
            "iconUrl": ""
        }, {
            "title": "打开历史文件",
            "suffix": "ctl+h",
            "iconUrl": ""
        }, {
            "title": "关闭所有文件并清空历史记录",
            "suffix": "ctl+e",
            "iconUrl": ""
        }]

    width: calcLineWidth(dataObj) - diffWidth
    height: dataObj.length * lineHeight
    visible: true

    property int lineHeight: 18
    //字体大小
    property int wordWidth: 12
    //调节后缀长度
    property int suffWordWidth: 10
    property int defaultSpaceLength: 40
    property string backColor: "#58e67e"
    property string selectColor: "white"
    //误差调整量
    property int diffWidth: 20

    function calcLineWidth(dataObj) {
        var res = 0
        for (var i = 0; i < dataObj.length; i++) {

            var iconlength = lineHeight - 5
            var titleLength = dataObj[i].title.length * wordWidth
            var suffixLength = dataObj[i].suffix.length * suffWordWidth
            var strLength = titleLength + suffixLength
            res = Math.max(res,
                           20 + iconlength + strLength + defaultSpaceLength)
        }
        console.log(res)
        return res
    }

    property int lineWidth: calcLineWidth(dataObj) - diffWidth

    function calcSpaceWidth(k) {
        var iconlength = lineHeight - 5
        var titleLength = dataObj[k].title.length * wordWidth
        var suffixLength = dataObj[k].suffix.length * suffWordWidth
        var strLength = titleLength + suffixLength
        var res = lineWidth - (20 + iconlength + strLength)
        console.log(k + "_space:" + res + ";total:" + ((20 + iconlength + strLength)))
        return res
    }

    function calcMaxTitleWidth() {
        var res = 0
        for (var i = 0; i < dataObj.length; i++) {
            var titleLength = dataObj[i].title.length * wordWidth
            res = Math.max(res, titleLength)
        }
        return res
    }

    property int totalHeight: dataObj.length * lineHeight
    property int maxTitleWidth: calcMaxTitleWidth()

    // signal menuItemClickMessage(int n,string message)

    function selectItem(n){
        console.log("here:"+n);
       for(var i=1;i<nvRepeater.itemAt(n).children.length;i++){
           nvRepeater.itemAt(n).children[i].color=navMenu.selectColor;
       }

    }



    Rectangle {
        height: totalHeight
        width: lineWidth
        color: backColor
        Column {
            height: totalHeight
            width: lineWidth

            Repeater {
                id:nvRepeater
                model: dataObj
                Row {
                    height: lineHeight
                    width: lineWidth
                    Image {
                        id: icon
                        width: lineHeight - 5
                        height: lineHeight - 5
                        source: ""
                        clip: true
                        anchors.top: parent.top
                        anchors.topMargin: 3
                        onStatusChanged: {
                            if (status === Image.Error) {
                                console.log("图片加载失败，状态: Image.Error")
                            } else if (status === Image.Ready) {
                                console.log("Image loaded successfully:",
                                            source)
                            }
                        }
                    }
                    Rectangle {
                        width: 10
                        height: parent.height
                        color: backColor
                        // anchors.centerIn: parent.Center
                    }
                    Rectangle {
                        width: maxTitleWidth
                        height: parent.height
                        color: backColor
                        Text {
                            width: parent.width
                            height: parent.height
                            text: modelData.title
                            font.pixelSize: wordWidth
                            //anchors.centerIn: parent.Center
                        }
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            propagateComposedEvents: true
                            onEntered: {
                                selectItem(index);
                            }

                            onExited: {

                            }
                        }
                    }

                    Rectangle {
                        width: defaultSpaceLength
                        height: parent.height
                        color: backColor
                        // anchors.centerIn: parent.Center
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            propagateComposedEvents: true
                            onEntered: {
                                console.log("Rectangle entered")
                            }

                            onExited: {
                                console.log("Rectangle exited")
                            }
                        }
                    }

                    Rectangle {
                        width: modelData.suffix.length * suffWordWidth - diffWidth
                        height: parent.height
                        color: backColor
                        Text {
                            width: parent.width
                            height: parent.height
                            text: modelData.suffix
                            font.pixelSize: wordWidth
                            // anchors.centerIn: parent.Center
                        }
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            propagateComposedEvents: true
                            onEntered: {
                                console.log("Rectangle entered")
                            }

                            onExited: {
                                console.log("Rectangle exited")
                            }
                        }
                    }
                }
            }
        }
    }
}
